import React from 'react';
import { Layout, Space } from 'antd';
import { Outlet } from 'react-router-dom';
import Header from '@/components/Header';
import Footer from '@/components/Footer';

const { Header: AntHeader, Content, Footer: AntFooter } = Layout;

const headerStyle = {
  color: '#fff',
  height: "60px",
  paddingInline: '24px',
  lineHeight: '60px',
  position: 'fixed',
  zIndex: 4,
  width: '100%',
  overflowY: 'hidden',
  fontSize: '16px'
};

const footerStyle = {
  width: '100%',
  textAlign: 'center',
  padding: '16px 50px'
};

const contentStyle = {
  paddingTop: "60px",
  minHeight: '100vh',
  overflowX: 'auto'
};

const LayoutComponent = () => {
  return (
    <Space direction="vertical" style={{ width: '100%' }} size={[0, 48]}>
      <Layout>
        <AntHeader style={headerStyle}>
          <Header />
        </AntHeader>
        <Layout style={contentStyle}>
          <Content>
            <Outlet />
            <AntFooter style={footerStyle}>
              <Footer />
            </AntFooter>
          </Content>
        </Layout>
      </Layout>
    </Space>
  );
};

export default LayoutComponent;
